<div ref:root>
  <Placeholder>
    <div style="opacity: 0.4;">
      <LazyImage aspectRatio={1} src="assets/images/renders/thumbnail-{layerName}.jpg" border={false} alt="thumbnail for {layerName}" />
    </div>
    <AtlasReticle
      bind:extent
      enableDragging={true}
      on:drag="fire('drag', event)"
    />
  </Placeholder>
</div>

<script>
  export default {
    components: {
      AtlasReticle: "../AtlasReticle.html",
      LazyImage: "../library/LazyImage.html",
      Placeholder: "../library/Placeholder.html"
    },
    data() {
      return {
        scaleCountFactor: 200
      }
    }
  }
</script>

<style>
ref:root {
  position: relative;
  width: 100%; 
  height: 100%;
  box-sizing: border-box;
  padding: 1px;
}
</style>